<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import dayjs from 'dayjs';
  import sheep from '@/sheep';

  export default {
    name: 'birthdayContent',
    components: { ImageAvater },
    data() {
      return {
        list: [
          {
            name: '家庭成员',
          },
          {
            name: '家谱成员',
          },
          {
            name: '我朋友的',
          },
        ],
        current: 0,
      };
    },
    props: {
      bottomFlag: {
        type: Boolean, default: false,
      },
      birthdayList: {
        type: [Object, Array],
        default: () => {
          return {};
        },
      },
      userInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    async mounted() {
      uni.$emit('getBottomButton');
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      IMPORTANT_DAY_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    watch: {
      current: {
        deep: true,
        handler(newVal, oldVal) {
          this.$emit('change', newVal);
        },
      },
    },
    methods: {
      dayjs,
      async goBirthday(info, index = 0) {
        console.log(info);
        if (info.countdown.day > 0) {
          sheep.$router.go('/pages/family/dayDetail', {
            type: 1,
            record_id: info.id,
            index,
            family_id: info.family_id,
            id: this.options.family_id || info.genealogy_id,
            is_genealogy: this.options.is_flag == 3 || !!info.genealogy_id ? 1 : 0,
          });
        } else {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: info.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          sheep.$router.go('/pages/family/birthday', {
            flag: 1,
            birthday_id: info.id,
            member_id: info.member_id,
            date: info.date,
            username: info.member_username,
            time_type: info.date_type,
            isLeapMonth: info.is_leap_month,
          });
        }
      },
      change(index) {
        this.current = index;
      },
      setShowMonth() {
        if (this.current == 0) {
          if (!!this.birthdayList.month && this.birthdayList.month.length > 0) {
            if (this.birthdayList.after_month.length > 0) {
              return true;
            } else {
              return false;
            }
          } else {
            return false;
          }
        }
      },
      setShowAfterMonth() {
        if (this.current == 0) {
          if (!!this.birthdayList.after_month && this.birthdayList.after_month.length > 0) {
            if (this.birthdayList.month.length > 0) {
              return true;
            } else {
              return false;
            }
          } else {
            return false;
          }
        }
      },
      addFriendsBirthday() {
        this.$nav.navigateTo('/pages/familyAnniversary/friendSBirthday/friendSBirthday');
      },
      // 转换为农历
      lunar(date) {
        let res = calendar.solar2lunar(date.split('-')[0], date.split('-')[1], date.split('-')[2]);
        return res.IMonthCn + res.IDayCn;
      },
    },
  };
</script>

<template>
  <view class="birthdayContent flex flex-column align-center">
    <!--    &lt;!&ndash; 用户信息 &ndash;&gt;-->
    <!--    <view class="anniversariesList_content_userCard flex align-center justify-between">-->
    <!--      <image class="anniversariesList_content_userCard_image" :src="`${IMG_URL}/index/userCard.png`"></image>-->
    <!--      <view class="anniversariesList_content_userCard_left flex align-center ml_20 z_1">-->
    <!--        <template>-->
    <!--          <view class="wh_100 hW_100" style="overflow: hidden">-->
    <!--            <image-avater-->
    <!--              :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"-->
    <!--              :width="100" :height="100"></image-avater>-->
    <!--          </view>-->
    <!--        </template>-->
    <!--        <view class="anniversariesList_content_userCard_left_info ml_22">-->
    <!--          <view class="anniversariesList_content_userCard_left_info_name flex align-center">-->
    <!--            <text class="anniversariesList_content_userCard_left_info_name_text">{{-->
    <!--                userInfo.username || userInfo.remark-->
    <!--              }}-->
    <!--            </text>-->
    <!--            <image class="anniversariesList_content_userCard_left_info_name_image ml_10"-->
    <!--                   :src="userInfo.gender == 1? `${IMG_URL}/index/user_men.png` : `${IMG_URL}/index/user_women.png`"></image>-->
    <!--            <view class="anniversariesList_content_userCard_left_info_personalAttributes_age ml_30">-->
    <!--              <text class="anniversariesList_content_userCard_left_info_personalAttributes_age_text">-->
    <!--                {{ userInfo.full_year }}-->
    <!--              </text>-->
    <!--            </view>-->
    <!--            <view class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao ml_30">-->
    <!--              <text class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text">-->
    <!--                {{ userInfo.animal }}-->
    <!--              </text>-->
    <!--            </view>-->
    <!--            <view class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao ml_30">-->
    <!--              <text class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text">-->
    <!--                {{ userInfo.constellation }}-->
    <!--              </text>-->
    <!--            </view>-->
    <!--          </view>-->
    <!--          <view class="anniversariesList_content_userCard_left_info_personalAttributes flex align-center mt_10">-->
    <!--            <view class="anniversariesList_content_userCard_left_info_personalAttributes_dateBirth">-->
    <!--              <text class="anniversariesList_content_userCard_left_info_personalAttributes_dateBirth_text">-->
    <!--                {{ userInfo.gregorian_date }}-->
    <!--              </text>-->
    <!--            </view>-->
    <!--            <view class="anniversariesList_content_userCard_left_info_personalAttributes_constellation ml_10">-->
    <!--              <text class="anniversariesList_content_userCard_left_info_personalAttributes_constellation_text">-->
    <!--                ({{ userInfo.ganzhi_year }}年){{ userInfo.lunar_date }}-->
    <!--              </text>-->
    <!--            </view>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    <view class="birthdayContent_tabs flex align-center mt_40">-->
    <!--      <view class="birthdayContent_tabs_content" v-for="(item, index) in list" :key="index" :style="{-->
    <!--        borderBottom: current == index ? '2px solid #FF4206' : 'none',-->
    <!--        color: current == index ? '#FF4206' : '#9F9F9F'-->
    <!--      }" @click.stop="change(index)">-->
    <!--        {{ item.name }}-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="hW_40"></view>
    <view class="birthdayContent_list" v-if="current == 0">
      <view class="birthdayContent_list_title flex align-center ml_22 mt_33 mb_23" v-if="setShowMonth()">
        <text class="birthdayContent_list_title_text">即将生日</text>
      </view>
      <view class="birthdayContent_list_content mb_37" v-for="(item, index) in birthdayList.month"
            :key="index" @click="goBirthday(item)">
        <image class="birthdayContent_list_content_image" v-if="item.countdown.day > 0"
               :src="`${IMPORTANT_DAY_URL}/index/birth_bf.png`"></image>
        <image class="birthdayContent_list_content_image" v-else
               :src="`${IMPORTANT_DAY_URL}/index/birth_jilu.png`"></image>
        <view class="birthdayContent_list_content_all flex align-center justify-between">
          <view class="birthdayContent_list_content_left ml_20 flex flex-column">
            <template v-if="!!item.date">
              <view class="flex align-center title">
                <image :src="`${IMG_URL}/index/jiating_birth_icon.png`" style="width: 22rpx;height: 22rpx;"></image>
                <text style="font-weight: 500;font-size: 18rpx;color: #FFFFFF;" class="ml_6">
                  倒计时
                </text>
              </view>
              <view class="birthday flex align-center justify-center">
                <view class="content flex flex-column align-center justify-center">
                  <template v-if="item.countdown.day > 0">
                    <view class="day">
                      {{ item.countdown.day }}
                    </view>
                    <view class="unit mt_10">
                      天
                    </view>
                  </template>
                  <template v-else-if="item.countdown.day == 0">
                    <view class="day">
                      今天
                    </view>
                  </template>
                </view>
              </view>
              <view class="member_info flex align-center">
                <image-avater
                  :src="item.member_avatar.indexOf(-1) ? item.member_avatar : `${nc_image}${item.member_avatar}`"
                  :width="40" :height="40"></image-avater>
                <view class="info ml_12">
                  {{ item.member_username }}的生日
                </view>
              </view>
              <view class="time flex align-center">
                <view :style="item.type != 1?'font-weight: bold;':'font-weight: 500;'">
                  {{ dayjs(item.countdown.date).format('YYYY年MM月DD日') }}
                </view>
                <view class="ml_10" :style="item.type == 1?'font-weight: bold;':'font-weight: 500;'">
                  <text>{{ item.countdown.mDay }}</text>
                </view>
                <view class="ml_10">
                  <text>{{ dayjs(item.countdown.date).format('dddd') }}</text>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="birthdayContent_list_content_left_name">
                <text class="birthdayContent_list_content_left_name_text" style="font-weight: bold;">{{
                    item.member_username
                  }}的生日
                </text>
              </view>
              <view class="birthdayContent_list_content_left_dayInfo flex flex-column ml_240">
                <view class="birthdayContent_list_content_left_dayInfo_day " style="font-size: 30rpx">
                  <text class="birthdayContent_list_content_left_dayInfo_day_text">记录一下</text>
                </view>
                <view class="birthdayContent_list_content_left_dayInfo_titles flex flex-column justify-center ">
                  <text class="birthdayContent_list_content_left_dayInfo_titles_text">唯有亲情最相思</text>
                </view>
              </view>
            </template>
          </view>
        </view>
        <view class="family_name">
          <text class="family_name_text">来自于{{ item.family_name || item.genealogy_name }}</text>
        </view>
      </view>
    </view>
    <view class="birthdayContent_list" v-if="current == 0">
      <view class="birthdayContent_list_title flex align-center ml_22 mt_33 mb_23" v-if="setShowAfterMonth()">
        <text class="birthdayContent_list_title_text">一个月后生日</text>
      </view>
      <view class="birthdayContent_list_content mb_37" v-for="(item, index) in birthdayList.after_month"
            :key="index" @click="goBirthday(item)">
        <image class="birthdayContent_list_content_image" v-if="item.day > 0"
               :src="`${IMPORTANT_DAY_URL}/index/birth_af.png`"></image>
        <image class="birthdayContent_list_content_image" v-else
               :src="`${IMPORTANT_DAY_URL}/index/birth_jilu.png`"></image>
        <view class="birthdayContent_list_content_all flex align-center justify-between">
          <view class="birthdayContent_list_content_left ml-20 column">
            <template v-if="!!item.date">
              <view class="flex align-center title">
                <image :src="`${IMG_URL}/index/jiating_birth_icon.png`" style="width: 22rpx;height: 22rpx;"></image>
                <text style="font-weight: 500;font-size: 18rpx;color: #FFFFFF;" class="ml_6">
                  倒计时
                </text>
              </view>
              <view class="birthday flex align-center justify-center">
                <view class="content flex flex-column align-center justify-center">
                  <template v-if="item.countdown.day > 0">
                    <view class="day">
                      {{ item.countdown.day }}
                    </view>
                    <view class="unit mt_10">
                      天
                    </view>
                  </template>
                  <template v-else-if="item.countdown.day == 0">
                    <view class="day">
                      今天
                    </view>
                  </template>
                </view>
              </view>
              <view class="member_info flex align-center">
                <image-avater
                  :src="item.member_avatar.indexOf('http') != -1 ?item.member_avatar :`${nc_image}${item.member_avatar}`"
                  :width="40" :height="40"></image-avater>
                <view class="info ml_12">
                  {{ item.member_username }}的生日
                </view>
              </view>
              <view class="time flex align-center">
                <view :style="item.type != 1?'font-weight: bold;':'font-weight: 500;'">
                  {{ dayjs(item.countdown.date).format('YYYY年MM月DD日') }}
                </view>
                <view class="ml_10" :style="item.type == 1?'font-weight: bold;':'font-weight: 500;'">
                  <text>{{ item.countdown.mDay }}</text>
                </view>
                <view class="ml_10">
                  <text>{{ dayjs(item.countdown.date).format('dddd') }}</text>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="no_avatar">
                <image-avater :src="`${nc_image}${item.member_avatar}`" width="40" height="40"></image-avater>
              </view>
              <view class="no_username">
                {{ item.member_username }}的生日
              </view>
              <view class="jiluyixia flex align-center justify-between">
                <view class="left flex align-center">
                  <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"></image>
                  <view class="wenzi">
                    记录一下
                  </view>
                </view>
                <view class="right">
                  唯有亲情最相思
                </view>
              </view>
            </template>
          </view>
        </view>
        <view class="family_name">
          <text class="family_name_text">来自于{{ item.family_name || item.genealogy_name }}</text>
        </view>
      </view>
    </view>
    <!--    <view class="birthdayContent_list" v-if="current == 2">-->
    <!--      <view class="birthdayContent_list_content mb-37" v-for="(item, index) in birthdayList"-->
    <!--            :key="index" @click="goBirthday(item,1)">-->
    <!--        <image class="birthdayContent_list_content_image"-->
    <!--               :src="`${IMPORTANT_DAY_URL}birth_pengyou.png`"></image>-->
    <!--        <view class="birthdayContent_list_content_all row items-center justify-between">-->
    <!--          <view class="birthdayContent_list_content_left ml-20 column">-->
    <!--            <view class="row items-center title">-->
    <!--              <image :src="`${IMG_URL}jiating_birth_icon.png`" style="width: 22rpx;height: 22rpx;"></image>-->
    <!--              <text style="font-weight: 500;font-size: 18rpx;color: #FFFFFF;" class="ml-6">-->
    <!--                倒计时-->
    <!--              </text>-->
    <!--            </view>-->
    <!--            <view class="birthday allRowCenter">-->
    <!--              <view class="content allColumnCenter justify-center">-->
    <!--                <template v-if="item.day > 0">-->
    <!--                  <view class="day">-->
    <!--                    {{ item.day }}-->
    <!--                  </view>-->
    <!--                  <view class="unit mt-10">-->
    <!--                    天-->
    <!--                  </view>-->
    <!--                </template>-->
    <!--                <template v-else-if="item.day == 0">-->
    <!--                  <view class="day">-->
    <!--                    今天-->
    <!--                  </view>-->
    <!--                </template>-->
    <!--              </view>-->
    <!--            </view>-->
    <!--            <view class="member_info row items-center ml-12">-->
    <!--              <image-avater :src="item.image" :width="40" :height="40"></image-avater>-->
    <!--              <view class="info">-->
    <!--                {{ item.username }}的生日-->
    <!--              </view>-->
    <!--            </view>-->
    <!--            <view class="time row items-center">-->
    <!--              <view :style="item.type != 1?'font-weight: bold;':'font-weight: 500;'">-->
    <!--                {{ item.next_public_time }}-->
    <!--              </view>-->
    <!--              <view class="ml-10" :style="item.type == 1?'font-weight: bold;':'font-weight: 500;'">-->
    <!--                <text>{{ item.next_time }}</text>-->
    <!--              </view>-->
    <!--              <view class="ml-10">-->
    <!--                <text>{{ item.week_name }}</text>-->
    <!--              </view>-->
    <!--            </view>-->
    <!--          </view>-->
    <!--          <view class="birthdayContent_list_content_right mr-20">-->
    <!--            <u-icon name="arrow-right" size="27" color="#FFFFFF"></u-icon>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--        <view class="family_name">-->
    <!--          <text class="family_name_text">来自于我朋友的</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    <bottom-button title="添加朋友生日" :is-fixed="bottomFlag" class="mt-50 z-20" v-if="current == 2"-->
    <!--                   @elementClick="addFriendsBirthday"></bottom-button>-->
    <view style="height: 80rpx"></view>
  </view>
</template>

<style scoped lang="scss">
  .birthdayContent {
    width: 702rpx;

    .anniversariesList_content_userCard {
      width: 702rpx;
      height: 144rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .anniversariesList_content_userCard_image {
        width: 702rpx;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      .anniversariesList_content_userCard_left {
        .anniversariesList_content_userCard_left_info {
          .anniversariesList_content_userCard_left_info_name {
            .anniversariesList_content_userCard_left_info_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #292929;
            }

            .anniversariesList_content_userCard_left_info_name_image {
              width: 27rpx;
              height: 27rpx;
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_age {
              .anniversariesList_content_userCard_left_info_personalAttributes_age_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #292929;
              }
            }
          }

          .anniversariesList_content_userCard_left_info_personalAttributes {
            .anniversariesList_content_userCard_left_info_personalAttributes_age {
              .anniversariesList_content_userCard_left_info_personalAttributes_age_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth {
              .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #696969;
              }
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_constellation {
              .anniversariesList_content_userCard_left_info_personalAttributes_constellation_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #696969;
              }
            }


          }
        }
      }

      .anniversariesList_content_userCard_right {
        .anniversariesList_content_userCard_right_image {
          width: 25rpx;
          height: 25rpx;
        }
      }
    }

    .birthdayContent_tabs {
      width: 702rpx;

      .birthdayContent_tabs_content {
        padding: 5rpx 0;
        margin: 0 21rpx;
        font-weight: 500;
        font-size: 34rpx;
        color: #9F9F9F;
      }
    }

    .birthdayContent_search {
      width: 702rpx;
      height: 80rpx;
      background: #E5E5E5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .birthdayContent_search_image {
        width: 32rpx;
        height: 32rpx;
      }

      .birthdayContent_search_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #A0A0A0;
      }
    }

    .birthdayContent_list {
      width: 702rpx;

      .birthdayContent_list_title {
        width: 702rpx;

        .birthdayContent_list_title_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #0F0F0F;
        }
      }

      .birthdayContent_list_content {
        width: 702rpx;
        height: 179rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
        position: relative;

        .birthdayContent_list_content_image {
          position: absolute;
          top: 0;
          left: 0;
          width: 702rpx;
          height: 100%;
          z-index: 0;
        }

        .birthdayContent_list_content_all {
          position: absolute;
          top: 0;
          left: 0;
          width: 702rpx;
          height: 100%;

          .birthdayContent_list_content_left {
            .title {
              position: absolute;
              top: 11rpx;
              left: 17rpx;
            }

            .birthday {
              position: absolute;
              top: 30rpx;
              left: 60rpx;
              width: 145rpx;
              height: 145rpx;
              border: 2rpx solid rgba(255, 255, 255, 0.1);
              border-radius: 50%;
              overflow: hidden;

              .content {
                width: 133rpx;
                height: 133rpx;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                overflow: hidden;

                .day {
                  font-weight: 500;
                  font-size: 56rpx;
                  color: #FFFFFF;
                  line-height: 42rpx;
                }

                .unit {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 18rpx;
                  color: #FFFFFF;
                }
              }
            }

            .member_info {
              position: absolute;
              top: 50rpx;
              left: 209rpx;

              .info {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #FFFFFF;
              }
            }

            .time {
              position: absolute;
              top: 93rpx;
              left: 209rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #FFFFFF;
            }

            .no_avatar {
              position: absolute;
              top: 24rpx;
              left: 28rpx;
            }

            .no_username {
              position: absolute;
              top: 66rpx;
              left: 28rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              color: #FFFFFF;
            }

            .jiluyixia {
              position: absolute;
              top: 113rpx;
              left: 28rpx;
              width: 294rpx;
              height: 35rpx;
              background: rgba(255, 255, 255, 0.19);
              padding: 0 12rpx;

              .left {
                image {
                  width: 25rpx;
                  height: 27rpx;
                }

                .wenzi {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 22rpx;
                  color: #FFFFFF;
                }
              }

              .right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18rpx;
                color: #FFFFFF;
              }
            }

            .birthdayContent_list_content_left_name {
              .birthdayContent_list_content_left_name_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #000000;
              }
            }

            .birthdayContent_list_content_left_dayInfo {
              .birthdayContent_list_content_left_dayInfo_title {
                .birthdayContent_list_content_left_dayInfo_title_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 20rpx;
                  color: #000000;
                }
              }

              .birthdayContent_list_content_left_dayInfo_day {
                .birthdayContent_list_content_left_dayInfo_day_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 60rpx;
                  color: #000000;
                  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
                }
              }

              .birthdayContent_list_content_left_dayInfo_titles {
                .birthdayContent_list_content_left_dayInfo_titles_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 20rpx;
                  color: #000000;
                }
              }
            }

            .birthdayContent_list_content_left_basicInformation {
              .birthdayContent_list_content_left_basicInformation_dateBirth {
                .birthdayContent_list_content_left_basicInformation_dateBirth_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #000000;
                }
              }

              .birthdayContent_list_content_left_basicInformation_dateBirthNV {
                .birthdayContent_list_content_left_basicInformation_dateBirthNV_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #000000;
                }
              }

              .birthdayContent_list_content_left_basicInformation_week {
                .birthdayContent_list_content_left_basicInformation_week_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #000000;
                }
              }
            }
          }
        }

      }
    }

    .birthdayContent_bottomButton {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      position: fixed;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      .birthdayContent_bottomButton_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
      }
    }
  }

  .family_name {
    position: absolute;
    right: 20rpx;
    bottom: 12rpx;

    .family_name_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #FFFFFF;
    }
  }

  .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao {
    .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #696969;
    }
  }
</style>

<style scoped lang="scss">
  ::v-deep .u-tabs {
    background: #FFFFFF !important;
  }
</style>